<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link href="./index.css" rel="stylesheet"/>
    <link href="./table.css" rel="stylesheet"/>
    <link href="./pugong.css" rel="stylesheet"/>
    <script src="./index.full.js"></script>

    <script>
        //适配代码
        (function (doc, win) {
            var docEI = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientataionchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEI.clientWidth;
                    if (!clientWidth) return;
                    //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
                    docEI.style.fontSize = 100 * (clientWidth / 1536) + 'px';
                }

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
    <style>
        * {
            /* margin: 0;
    padding: 0; */
            font-size: 0.15rem;
        }

        .top-content {
            text-align: center;
        }

        .top-img {
            display: block;
            width: 1.5rem;
            margin: auto;
        }

        .top-title {
            font-size: 0.3rem;
            word-spacing: 10px;
            margin: 0.6rem 0;
        }

        .top-text {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .top-input {
            width: 200px;
        }

        .top-input .el-input__wrapper {
            box-shadow: none;
            border-bottom: 1px solid #333;
            border-radius: 0;
            text-align: center;
        }

        .top-input .el-input__inner {
            text-align: center;
        }

        .top-text span {
            display: inline-block;
            font-size: 0.22rem;
            width: 1rem;
            text-align: justify;
            text-align-last: justify;
        }

        .top-company {
            font-size: 0.2rem;
            word-spacing: 10px;
        }

        .red-text {
            color: red;
        }

        .el-input.is-disabled .el-input__wrapper {
            box-shadow: none;
            background-color: transparent;
        }

        .el-input.is-disabled .el-input__inner {
            color: #000;
            -webkit-text-fill-color: #000;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="container">

        <div class="anchorPointMenu">
            <el-menu @select="handleMenuSelect">
                <el-menu-item index="iframe-card">
                    <span v-bind:class="{'red-text': !isFillAll('cardForm') }">本人持卡承诺书</span>
                </el-menu-item>
            </el-menu>

            
            <div style="padding-left: 80px;margin-top: 15px;">
                <el-button :disabled="!isFillAll('all')" type="primary" @click="onsubmit()">
                提交
                </el-button>
                <!-- <el-button @click="onsubmit()" type="primary">
                    提交
                </el-button> -->
            </div>
        </div>


        <div class="contentWord " style="width: 100%;">
            <iframe border="0" frameborder="no" height="1400px" id="iframe-card" marginheight="0"
            marginwidth="0" scrolling="no" src="./本人持卡承诺书.html" width="100%"></iframe>
        </div>
    </div>
</div>
</div>
<script>
    const {
        createApp,
        reactive,
        toRefs,
        ref,
        onMounted
    } = Vue;
    const vue3Composition = {
        setup() {
            const isFillAll = (key) => {
                let flag = true
                if (key == 'all') {
                    let mustArr = mustData.value
                    mustArr.forEach(item => {
                        item.keys.forEach(item => {
                            if (!item.isFill) flag = false
                        })
                    })
                } else {
                    let arr = mustData.value.find(item => item.form == key)
                    arr.keys.forEach(item => {
                        if (!item.isFill) flag = false
                    })
                }
                return flag
            }
            
            window.addEventListener('message', e => {
                    let data = e.data
                    let keys = mustData.value.find(item => item.form == data.form)
                    keys.keys.find(item => item.key == data.key).isFill = data.isFill
                    
                });
            //必填字段
            const mustData = ref(
                [
                {
                    // 本人持卡承诺书
                    form: 'cardForm',
                    keys: [
                        {
                            key: 'promiseSign',
                            isFill: false
                        }
                    ]
                },
            ])
            let dataKey = ref()
            const personCards = ref('')
            // 本人持卡承诺书
            const iframeCard = ref('')
    
            window.childListener = function (data) {
                setUpEquipment(data.key, data.type)
            }

            window.handleMessage = (event) => {
                let eventData = JSON.parse(event.data)
                console.log("这里是父项目传来的值", eventData);
                // return;
                if (eventData.type == 1) {
                    let data = eventData.data
                
                    setTimeout(() => {
                     
                        iframeCard.value = document.getElementById("iframe-card");
                    
                        //设置默认值
                        personCards.value = data.laborPersonnel.idCard
                        console.log(data.laborPersonnel,'data.laborPersonnel')
                        iframeCard.value.contentWindow.setData(data.laborPersonnel)
                      
                    }, 3000);


                } else {
                    let dataKeyArr = dataKey.value.split('.')
                    console.log(dataKeyArr, 'dataKeyArr')
                    let iframeDate = ''

                    if(dataKeyArr[0] == 'cardForm') {
                        iframeDate = iframeCard.value
                    }

                    if (iframeDate) {
                        let mustArr = mustData.value.find(item => item.form == dataKeyArr[0])
                        mustArr.keys.forEach(item => {
                            if (item.key == dataKeyArr[1]) item.isFill = true
                        })
                        iframeDate.contentWindow.setSign({
                            img: 'data:image/png;base64,' + eventData.data + '',
                            key: dataKeyArr[1]
                        })
                    }
                }

            };
            function handleMenuSelect(index) {
                const anchor = document.getElementById(index);
                if (anchor) {
                    anchor.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            }

            


            //peopleForm.sign
            const setUpEquipment = (key, type) => {
                console.log(key,'===setUpEquipment==key',type)
                dataKey.value = key
                //提交这么写
                // window.parent.postMessage(type, "*");
                // window.parent.postMessage("hello，我即将传给父项目", "*");
                window.parent.childListener({
                    data: type
                });
            }

            const onsubmit = () => {
                // console.log(iframeCard.value.contentWindow.getData(), '本人持卡承诺书');
                // return

                let dataJson = {
                    oppfPromise: iframeCard.value.contentWindow.getData()
                }
                let data = {
                    personCard: personCards.value,
                    type: "form-k",
                    dataJson
                }

                window.parent.childListener({
                    data: JSON.stringify(data)
                });

            }


            return {
                setUpEquipment,
                handleMenuSelect,
                onsubmit,
                isFillAll,
                personCards
            }
        }

    }
    const app = createApp(vue3Composition).use(ElementPlus).mount('#app');
</script>
</body>


</html>